<script setup>
import { ref } from "vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {getUsersReportService,getDynamicsReportService,getCommentsReportService} from "@/api/report.js"
import {consentUserReportService,consentDynamicReportService,consentCommentReportService} from "@/api/report.js"
import {deleteUserReportService,deleteDynamicReportService,deleteCommentReportService} from "@/api/report.js"


const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    pageNum.value = 1
    getReport()

}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getReport()
}

const typeValue = ref("user");
const reports = ref([]);
const getReport = async () => {

  if(typeValue.value=='user'){
    const res=await getUsersReportService(pageNum.value,pageSize.value)
    console.log(res)
    total.value=res.data.total
    reports.value=res.data.list
  }else if(typeValue.value=='dynamic'){
    const res=await getDynamicsReportService(pageNum.value,pageSize.value)
    console.log(res)
    total.value=res.data.total
    reports.value=res.data.list
  }else{
    const res=await getCommentsReportService(pageNum.value,pageSize.value)
    console.log(res)
    total.value=res.data.total
    reports.value=res.data.list
  }

 
};

getReport()
const handleConsent=async (row)=>{
    if(typeValue.value=='user'){
      const res=await consentUserReportService(row.handingId)
      console.log(res)

    }else if(typeValue.value=='dynamic'){
      const res=await consentDynamicReportService(row.handingId)
      console.log(res)
    }else{
      const res=await consentCommentReportService(row.handingId)
      console.log(res)
    }
    getReport()
    ElMessage.success('举报已通过')
}

const handleDelete=async (row)=>{
    if(typeValue.value=='user'){
      const res=await deleteUserReportService(row.handingId)
      console.log(res)
    }else if(typeValue.value=='dynamic'){
      const res=await deleteDynamicReportService(row.handingId)
      console.log(res)
    }else{
      const res=await deleteCommentReportService(row.handingId)
      console.log(res)
    }
    getReport()
    ElMessage.success('举报已驳回')
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>举报处理</span>
      </div>
    </template>
    <el-form inline>
      <el-form-item label="举报类别：">
        <el-select
          v-model="typeValue"
          placeholder="Select"
          @change="getReport"
          style="width: 240px"
        >
          <el-option label="用户" value="user"></el-option>
          <el-option label="动态" value="dynamic"> </el-option>
          <el-option label="评论" value="comment"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="reports" style="width: 100%; margin-top: 50px">
      <el-table-column label="序号" width="100"  type="index"> </el-table-column>
      <el-table-column :label="(typeValue=='user'?'用户':typeValue=='dynamic' ? '动态':'评论')+'id'" :prop="typeValue+'Id'"></el-table-column>
      <el-table-column label="举报理由" prop="content"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
            <el-button
            size="small"
            type="primary"
            @click="handleConsent( scope.row)"
          >
            同意
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            驳回
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty v-if="reports.length==0" description="空空如也" />
    </template>
    </el-table>
    <el-config-provider :locale="zhCn" >
    <el-pagination class="pag" v-if="reports.length>0"  v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[2, 3, 4]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: left" />
    
  </el-config-provider>
  </el-card>
</template>

<style scoped>
.page-container {
  margin-top: 50px;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.pag {
  position: absolute;
  bottom: 0;
  margin-bottom: 40px;
}
</style>
